<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
       <li>胡歌</li>
       <li>彭于晏</li>
       <li>赵玉真</li>
       <li>韩立</li>
       <li>小小怪</li>
    </ul>
    <ol>
        <li>胡歌1</li>
        <li>彭于晏2</li>
        <li>赵玉真3</li>
        <li>韩立4</li>
        <li>小小怪5</li>
     </ol>
     <div class="box">
        <span class="er">x</span>
     </div>

     <div class="box1">1</div>
     <span>2</span>
     <script>
        // 父节点 parentNode
        var er=document.querySelector('.er')
        // var box=document.querySelector('box')  

       // 得到的是距离元素最近的父级节点(亲爸爸) 如果找不到就返回null
        console.log( er.parentNode);


        // 子节点
        var ul=document.querySelector('ul')
        var lis=ul.querySelectorAll('li')

        // 子节点 childNodes 获取所有的子节点 包括 元素节点 属性节点 文本节点
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType); //索引为零的文本节点
        console.log(ul.childNodes[1].nodeType); //索引为1的元素节点



        // 第二种方式 获取所有子元素节点 (大量使用) 父元素下的孩子们
        console.log(ul.children);
      //   可以用索引




        // 文本.nodeType 文本节点为3
        // 属性.nodeType 属性节点为2
         //属性.nodeType 元素节点为1

         var  ol=document.querySelector('ol')
         console.log(ol.firstChild); // 获取第一个元素节点 因为有换行所有是文本节点
         console.log(ol.lastChild); // 获取最后一个元素节点  因为有换行所有是文本节点

         console.log(ol.firstElementChild); // 获取第一个元素节点
         console.log(ol.lastElementChild); // 获取最后一个元素节点


         var box1 =document.querySelector('.box1')
         console.log(box1.nextSibling); //返回当前元素的下一个兄弟节点 包括文本，空格 找不到就返回null
         console.log(box1.previousSibling); //返回当前元素的上一个兄弟节点 包括文本，空格 找不到就返回null

         // 返回下一个兄弟元素节点
         console.log(box1.nextElementSibling);
          // 返回上一个兄弟元素节点
         console.log(box1.previousElementSibling);
     </script>
</body>
</html>